<template>
  <div class="box">
    <h1></h1>
    <h2></h2>
    <h2></h2>
    <List :todos="todos">
      <template v-slot="{row,$index}">
        <p :style="{color:row.isComplete?'green':'red'}">
          id:{{row.id}}--标题:{{row.title}}--索引:{{$index}}
        </p>
      </template>
    </List>
    <h2></h2>
    <List :todos="todos">
      <template v-slot="{row,$index}">
        <p :style="{color:$omdex%2==0?'green':'blue'}">
          序号:{{$index+1}}--标题:{{row.title}}
        </p>
      </template>
    </List>
  </div>
</template>

<script name="SlotTest" lang="ts" setup>
  import List from './List.vue'
  import {ref} from 'vue'
  import type {Users} from './types'
  const todos = ref<Users>([
    {id:1,title:'AAA',isComplete:false},
    {id:2,title:'BBB',isComplete:true},
    {id:3,title:'CCC',isComplete:false},
    {id:4,title:'DDD',isComplete:false},
  ])
</script>

<style scoped>

</style>
